 
<!--
 * @Author: gao_m3
 * @Date: 2020-12-01 08:57:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-19 09:21:54
 * @Descripttion: 
-->
<template>
  <div>
    <fks-button
      v-if="serverType != 'fileServerConfig'"
      v-permission="['sms:add']"
      icon="fks-icon-plus"
      style="z-index: 1; float: right; margin-top: 1px; margin-bottom: 16px"
      type="primary"
      @click="serverAdd"
    >
      {{ LANG.ADD }}
    </fks-button>
    <fks-table :data="smsServerConfig">
      <fks-table-column
        type="index"
        label="#"
        align="center"
        min-width="50px"
      />
      <fks-table-column
        :label="LANG.SERVER_NAME"
        prop="serverName"
        align="left"
        min-width="120"
        header-align="center"
      />
      <fks-table-column :label="LANG.SERVER_TYPE" prop="type" width="120px" />
      <fks-table-column
        :label="LANG.SERVER_ADDRESS"
        prop="host"
        align="left"
        min-width="120"
        header-align="center"
      />
      <fks-table-column :label="LANG.PORT" prop="port" width="120px" />
      <fks-table-column
        :label="LANG.ACCOUNT"
        prop="username"
        align="left"
        min-width="120"
        header-align="center"
      />

      <fks-table-column
        :label="LANG.SIGN"
        prop="sign"
        align="left"
        min-width="120"
        header-align="center"
      />

      <fks-table-column :label="LANG.OPERATION" width="100" align="left">
        <span slot-scope="scope">
          <fks-button
            v-permission="['sms:edit']"
            type="text"
            @click="smsEdit(scope.$index)"
            >{{ LANG.EDIT }}</fks-button
          >
          <fks-button
            v-permission="['sms:delete']"
            danger-text
            @click="smsDelete(scope.$index)"
            >{{ LANG.DELETE }}</fks-button
          >
        </span>
      </fks-table-column>
    </fks-table>
    <add-config
      :show-dialog="showDialog"
      :config="addConfig"
      :server-type="serverType"
      :server-state="serverState"
      @submit="submit"
      @close="close"
    />
  </div>
</template>

<script>
import AddConfig from './AddConfig'
export default {
  name: 'SmsServer',
  components: { AddConfig },
  props: {
    smsServerConfig: {
      required: true,
      type: Array
    },
    updateConfig: {
      required: true,
      type: Function
    }
  },
  data() {
    return {
      initData: {},
      showDialog: false,
      addConfig: {},
      serverType: 'smsServerConfig',
      serverState: false, //0为编辑，1为新增,
      serverIndex: 0, //当前为第几行
      deleteConfirm: false
    }
  },
  methods: {
    serverAdd() {
      this.showDialog = true
      this.serverState = true
    },
    close() {
      this.showDialog = false
    },

    /**
     * @description: 真正的提交方法
     */
    submit(addConfig, serverState) {
      let copyAddConfig = JSON.parse(JSON.stringify(addConfig))
      if (this.serverState) {
        this.smsServerConfig.splice(
          this.smsServerConfig.length,
          0,
          JSON.parse(JSON.stringify(copyAddConfig))
        )
      } else {
        this.smsServerConfig.splice(
          this.serverIndex,
          1,
          JSON.parse(JSON.stringify(copyAddConfig))
        )
      }
      this.updateConfig({ smsServerConfig: this.smsServerConfig })
        .then((res) => {
          if (serverState) {
            this.$message({
              type: 'success',
              message: this.LANG.ADD_SUCCESS
            })
          } else {
            this.$message({
              type: 'success',
              message: this.LANG.EDIT_SUCCESS
            })
          }
          //关闭弹窗
          this.close()
        })
        .catch(() => {})
    },

    smsEdit(index) {
      this.serverState = false
      this.serverIndex = index
      this.addConfig = JSON.parse(JSON.stringify(this.smsServerConfig[index]))
      this.addConfig.password = ''
      this.showDialog = true
    },
    smsDelete(index) {
      this.$confirm(this.LANG.SMS_DELETE, {
        title: this.LANG.TIPS,
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        deleteMode: true
      })
        .then(() => {
          this.$message.success(this.LANG.DELETE_SUCCESS)
          this.deleteConfirm = true
          // let newServerConfig = JSON.parse(JSON.stringify(this.smsServerConfig))
          this.smsServerConfig.splice(index, 1)
          this.updateConfig({ smsServerConfig: this.smsServerConfig })
        })
        .catch(() => {})
    }
  }
}
</script>
 